<template>
  <div class="area-modal">
    <el-dialog width="30%" v-model="dialogVisible" :before-close="handleClose">
      <template #header="{ close, titleId, titleClass }">
        <div class="my-header">
          <div>新建场次</div>
        </div>
      </template>
      <div class="scheme-box">
        <el-form
          ref="ruleFormRef"
          :model="addForm"
          :rules="rules"
          label-width="100px"
          class="demo-ruleForm"
          status-icon
        >
          <el-form-item label="场次名称" prop="ccName">
            <el-input class="formwidth" placeholder="请输入" v-model="addForm.ccName" />
          </el-form-item>
          <el-form-item label="预报时间" prop="fcTime">
            <el-date-picker
              v-model="addForm.fcTime"
              type="datetime"
              placeholder="选择日期"
              @change="handleChangeDate"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="场次编码" prop="ccCode">
            <el-input class="formwidth" v-model="addForm.ccCode" disabled />
          </el-form-item>
          <el-form-item label="预热期" prop="yrPerd">
            <div class="content-item">
              <el-input v-model="addForm.yrPerd" @input="handleBlurStart"></el-input>
              <span>小时</span>
              <span>开始时间</span>
              <span>{{ addForm.startTime || '--' }}</span>
            </div>
          </el-form-item>
          <el-form-item label="预见期" prop="yjPerd">
            <div class="content-item">
              <el-input v-model="addForm.yjPerd" @input="handleBlurEnd"></el-input>
              <span>小时</span>
              <span>结束时间</span>
              <span>{{ addForm.endTime || '--' }}</span>
            </div>
          </el-form-item>
          <el-form-item label="降雨类型：" prop="rainType">
            <el-select v-model="addForm.rainType" placeholder="请选择" @change="handleChangeRain">
              <el-option
                v-for="(item, index) in state.rainTypeArr"
                :key="index"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="handleSave"> 确定 </el-button>
          <el-button @click="handleClose()">取消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, defineExpose } from 'vue'
import { renderTime, formatMsToDate, dateSwitch } from '@/utils/index'
import { ElMessage } from 'element-plus'
import { addCalcSchemeCc } from '@/services/modules/model-exam'
onMounted(() => {})
const emit = defineEmits(['closeDialog'])
const closeDialog = () => {
  emit('closeDialog', false)
}
const dialogVisible = ref(false)
const ruleFormRef = ref(null)
const addForm = reactive({
  ccCode: ''
})
const state = reactive({
  schemeId: '',
  // 降雨类型
  rainTypeArr: [
    { name: '无', id: -1 },
    { name: '落地雨', id: 0 },
    { name: '数值预报', id: 2 },
    { name: '短临预报', id: 3 },
    { name: '短临+数值', id: 4 }
  ]
})
function handleChangeDate(date) {
  addForm.ccCode = dateSwitch(date)
}
function handleBlurStart() {
  addForm.fcTime = new Date(addForm.fcTime).getTime()
  addForm.startTime = formatMsToDate(addForm.fcTime - addForm.yrPerd * 3600000)
}
function handleBlurEnd() {
  addForm.fcTime = new Date(addForm.fcTime).getTime()
  addForm.endTime = formatMsToDate(addForm.fcTime + addForm.yjPerd * 3600000)
}
function handleSave() {
  addForm.fcTime = new Date(addForm.fcTime).getTime()
  addForm.startTime = formatMsToDate(addForm.fcTime - addForm.yrPerd * 3600000)
  addForm.endTime = formatMsToDate(addForm.fcTime + addForm.yjPerd * 3600000)
  addForm.fcTime = renderTime(addForm.fcTime)
  addForm.scid = state.schemeId
  // addForm.ccCode = addForm.ccCode.slice(0, -4)
  addCalcSchemeCc(addForm).then((res) => {
    if (res.code === 200) {
      ElMessage.success(res.msg)
      handleClose()
      closeDialog()
    }
  })
}
function handleOpenModal(id) {
  dialogVisible.value = true
  state.schemeId = id
}
defineExpose({ handleOpenModal })
function handleClose() {
  dialogVisible.value = false
  ruleFormRef.value.resetFields()
}
</script>

<style lang="less" scoped>
.content-item {
  display: flex;
  justify-content: center;
  align-items: center;
  // height: 50px;
  :deep(.el-input) {
    width: 100px;
  }
  // span:nth-of-type(1) {
  //   margin-left: 10px;
  // }
  span {
    margin-left: 10px;
  }
  // span:nth-of-type(3) {
  //   margin: 0 20px 0 80px;
  // }
}
.area-modal {
  .my-header {
    height: 35px;
    border-bottom: 2px solid #eee;
  }
}
</style>
